import React,{useState} from 'react'
import myevents from '../utils/myevents';
// 行内样式双花括号驼峰，后面字符串
// css in js 用js的方式书写css
const Style = {
    "marginLeft" : "30px"
}
function Header({arr}) {
  let [activeIndex,setActiveIndex] = useState(0) 
  console.log(arr);
  let changeIndex = (index)=>{
     console.log(index);
     myevents.emit("aaa",index)
     setActiveIndex(index)
  }
  return (
    <div>
        {
            arr && arr.length ? arr.map((item,index)=>{
                return <span key={index} style={Style} className={index===activeIndex?"active":""} onClick={()=>changeIndex(index)}>{item.tit}</span>
            }):"暂无数据"
        }
    </div>
  )
}

export default Header